html {
    /* 
      100vw=750px
      1px=   0.133333333vw
      10px=1rem=1.3333w

       40px=4rem=5.3333vw;
       
 
    
     */
    font-size: 5.3333vw;
    /* 去除滚动条 */
    overflow-x: hidden; 
	overflow-y: scroll;
}

* {
    margin: 0;
    padding: 0;
}
body{
    width: 750px;
    max-width: 750px;
    min-width: 360px;
}
.outer-big {
    width: 17.5rem;
    padding-left: 0.4rem;
    padding-right: 0.6rem;
    overflow: hidden;
}

.outer {
    width: 17.5rem;
    height: 3.6rem;
    display: flex;
    align-items: center;
    position: relative;
}

.left-img {
    background-image: url(./image/left.png);
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.right-box {
    background-image: url(./image/right.png);
    background-size: 100% 100%;
    background-position: center;
    width: 0.55rem;
    height: 0.75rem;
    position: absolute;
    right: 0.1rem;
}


.center-box {
    display: flex;
    width: 5rem;
    flex-direction: column;
    margin-left: 0.8rem;

}

.center-box .top-text {
    font-size: 0.7rem;
    color: black;
    font-weight: bold;
}

.center-box .bottom-text {
    font-size: 0.6rem;
    color: #9FA4A7;
}

.text-content>span {
    font-size: 0.8rem;
    color: black;
    line-height: 1.2rem;
    margin-top: 0.85rem;
}

.cover {
    background-color: black;
    width: 17.5rem;
    height: 11rem;
    margin-top: 0.6rem;
    border-radius: 0.4rem;
}

.cover>img {
    width: 100%;
    height: 100%;
}

.text-contet {

    display: flex;
    margin-top: 0.8rem;
}

.text-type-content {
    border-radius: 0.6rem;
    display: flex;
    height: 1.2rem;
    background-color: #E6F7EE;
    padding: 0.1rem 0.1rem;
}

.text-type-content>span {
    font-size: 0.6rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #465156;
    align-items: center;
}

.text-type-content-green {
    border-radius: 0.6rem;
    height: 1.2rem;
    padding: 0.1rem 0.1rem;
    background-color: #E6F7EE;
    display: flex;
}

.text-type-content-green>span {
    color: #0CB65B;
    align-items: center;
    font-size: 0.6rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
}

.text-type-content~div {
    margin-left: 1.2rem;
}

.chaolianjie {
    border-radius: 0.6rem;
    height: 1.2rem;
    padding: 0.1rem 0.1rem;
    font-size: 0.6rem;
    background-color: #E6F7EE;
    display: flex;
    color: #0CB65B;
    align-items: center;
    flex-direction: row;
    position: relative;
}

.chaolianjie span {
    /* 单行显示结尾省略号 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 2;
    margin-right: 5px;
}

.fa-book-open {
    margin-right: 4px;
    flex-grow: 1;
}

.fa-angle-right {
    right: 0;
    flex-grow: 1;
    position: absolute;
}

.comment-layout {
    height: 5.25rem;
    background: #F6F6F6;
    border-radius: 0.4rem;
    padding: 0.8rem;
}

.teacher-comment {
    display: flex;
    align-items: flex-end;
}

.teacher-comment span {
    font-size: 0.7rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0CB65B;
}

.teacher-comment img {
    width: 1.55rem;
    height: 0.8rem;
    margin-left: 4px;
}

.sound-log {
    width: 3.15rem;
    height: 0.9rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-left: 0.25rem;
    background-image: url(./image/sound3.png);
    display: flex;
    justify-content: space-evenly;
}

.sound-log span {
    color: white;
    font-weight: bold;
    margin-left: 1.8rem;
    font-size: 0.6rem;
}
  .comment-let-c{
    color: #A3A8AB;
    font-size: 0.7rem;
}
.baobao img{
    width: 0.7rem;
    height: 0.7rem;
}
.baobao .comment-pic-c{
    color: #588BFF;
    font-size: 0.7rem;
}
 .comment-right-c{
    color: #18252C;
    font-size: 0.7rem;
}
.comment-layout>span{
    color: #A3A8AB;
    font-size: 0.6rem;
}
.bottom-layout {
    width: 100%;
    height: 2.8rem;
  display: flex;
  flex-flow: row;
  align-items: center;
}
.share-weixin img{
    width: 2.65rem;
    height: 1.2rem; 
}
.pinglun img,.dianzan img,.shoucang img{
    width: 1.2rem;
    height: 1.2rem;
}
.bottom-layout span{
    color: #747C80;
    font-size: 0.6rem;
}
 .share-weixin{
    display: flex;
    flex-flow: row;
    flex-grow: 4;
    align-items: center;
}
.pinglun{
    display: flex;
    flex-flow: row;
    align-items: center;
    flex-grow: 1;
    justify-content: end;
}
.dianzan{
    display: flex;
    flex-flow: row;
    align-items: center;
    flex-grow: 1;
    justify-content: end;
}
.shoucang{
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: end;
}  